<template>
  <div class="hello">
    <div class="box">
      <dl>
        <dt>A</dt>
        <dd>Andrew W.K.</dd>
        <dd>Apparat</dd>
        <dd>Arcade Fire</dd>
        <dd>At The Drive-In</dd>
        <dd>Aziz Ansari</dd>
      </dl>
      <dl>
        <dt>C</dt>
        <dd>Chromeo</dd>
        <dd>Common</dd>
        <dd>Converge</dd>
        <dd>Crystal Castles</dd>
        <dd>Cursive</dd>
      </dl>
      <dl>
        <dt>E</dt>
        <dd>Explosions In The Sky</dd>
      </dl>
      <dl>
        <dt>T</dt>
        <dd>Ted Leo & The Pharmacists</dd>
        <dd>T-Pain</dd>
        <dd>Thrice</dd>
        <dd>TV On The Radio</dd>
        <dd>Two Gallants</dd>
      </dl>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.box {
  border: 1px solid red;
  height: 400px;
    overflow: auto;
  dl {
    padding-top: 24px;
    dt {
      background: #b8c1c8;
      border-bottom: 1px solid #989ea4;
      border-top: 1px solid #717d85;
      color: #fff;
      font: bold 18px/21px Helvetica, Arial, sans-serif;
      padding: 2px 0 0 12px;
      position: sticky;
      // 去除1像素的边框
      top: -1px;
    }
    dd {
      font: bold 20px/45px Helvetica, Arial, sans-serif;
      padding-left: 12px;
      white-space: nowrap;
    }
    dd + dd {
      border-top: 1px solid #ccc;
    }
  }
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
